<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<style type="text/css">
    html, body {
        padding: 0;
        margin: 0;
    }

    * {
        box-sizing: border-box;
    }

    .container {
        min-width: 1300px;
        min-height: 100vh;
        border: 2px solid maroon;
        display: flex;
        flex-direction: column;
    }

    header {
        flex: 0 0 80px; /* 不伸缩 固定80px 由于项目排列方式是由上到小，所以占据的空间就为高度，如果是由左到右，则表示宽度 */
        background-color: #1070bc;
    }

    footer {
        flex: 0 0 60px; /* 不伸缩 固定60px */
        background-color: #505050;
    }

    .main {
        flex: 1 0 500px; /* 自动分配剩余空间，不缩小，可放大，至少固定500px */
        max-height: 500px; /* 设置最大高度，优先级大于flex */
        display: flex;
    }

    nav {
        flex: 0 0 300px; /* 不伸缩，固定300px  排列方式是由左到右，则表示宽度*/
        overflow: auto;
        background-color: #ddd;
    }

    .content {
        flex: auto; /* 表示 1 1 auto，自动分配剩余空间，空间不足会自动压缩 */
    }

    @media only screen and (max-width: 768px) {
        .container {
            min-width: unset;
        }

        .main {
            flex-direction: column; /* 将子项目排列方式改为由上到下 */
            overflow-y: auto;
        }

        nav {
            flex: 1 0 auto; /* 自动分配剩余空间，不缩小，没有固定的空间  */
        }
        .content {
            flex: 1 0 100px;
        }
    }
</style>
<body>
<!--
    圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。
    页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏 或（副栏）。
 -->
<div class="container">
    <header>
        header
    </header>
    <div class="main">
        <nav>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p><p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
            <p>nav</p>
        </nav>
        <div class="content">
            content
        </div>
        <!--<aside>
            aside
        </aside>-->
    </div>
    <footer>
        footer
    </footer>
</div>
</body>
</html>